<template>
	<div class="login-container" :class="darkMode ? 'dark-mode' : 'light-mode'">
		<!-- 背景装饰 -->
		<div class="bg-decoration"></div>

		<!-- 注册卡片 -->
		<div class="login-card">
			<!-- 注册标题 -->
			<h2 class="login-title">用户注册</h2>

			<!-- 注册表单 -->
			<div class="login-form">
				<!-- 用户名输入 -->
				<div class="reg-form-item">
					<div class="input-wrapper">
						<i class="fa fa-user"></i>
						<input type="text" placeholder="请输入用户名" class="holder-class" v-model="user.username" />
					</div>
					<div class="line"></div>
					<!-- 实时验证提示 -->
					<div v-if="!isUsernameValid && user.username" class="error-message">
						用户名长度应为3-20个字符
					</div>
				</div>

				<!-- 邮箱输入 -->
				<div class="reg-form-item">
					<div class="input-wrapper">
						<i class="fa fa-envelope"></i>
						<input type="email" placeholder="请输入邮箱" class="holder-class" v-model="user.email" />
					</div>
					<div class="line"></div>
					<!-- 实时验证提示 -->
					<div v-if="!isEmailValid && user.email" class="error-message">
						请输入有效的邮箱地址
					</div>
				</div>

				<!-- 密码输入 -->
				<div class="reg-form-item">
					<div class="input-wrapper">
						<i class="fa fa-lock"></i>
						<input :type="showPassword ? 'text' : 'password'" placeholder="请输入密码" class="holder-class"
							v-model="user.password" />
						<i :class="showPassword ? 'fa fa-eye toggle-password' : 'fa fa-eye-slash toggle-password'"
							@click="togglePasswordVisibility"></i>
					</div>
					<div class="line"></div>
					<!-- 密码强度指示器 -->
					<div class="password-strength" :class="`strength-${passwordStrength}`">
						密码强度: {{ passwordStrength }}
					</div>
				</div>

				<!-- 确认密码输入 -->
				<div class="reg-form-item">
					<div class="input-wrapper">
						<i class="fa fa-lock"></i>
						<input :type="showPassword ? 'text' : 'password'" placeholder="请再次输入密码" class="holder-class"
							v-model="user.confirmPassword" />
						<i :class="showPassword ? 'fa fa-eye toggle-password' : 'fa fa-eye-slash toggle-password'"
							@click="togglePasswordVisibility"></i>
					</div>
					<div class="line"></div>
					<!-- 实时验证提示 -->
					<div v-if="user.confirmPassword && user.password !== user.confirmPassword" class="error-message">
						两次输入的密码不一致
					</div>
				</div>

				<!-- 同意协议 -->
				<div class="reg-form-item agree-item">
					<label class="agree-label">
						<input type="checkbox" v-model="user.agreeTerms" />
						<span>我已阅读并同意<a href="#" @click.prevent="showTerms">用户协议</a>和<a href="#"
								@click.prevent="showPrivacy">隐私政策</a></span>
					</label>
					<!-- 实时验证提示 -->
					<div v-if="!user.agreeTerms && formSubmitted" class="error-message">
						请同意用户协议和隐私政策
					</div>
				</div>

				<!-- 注册按钮 -->
				<div class="reg-form-item">
					<button class="reg-btn" :class="{ disabled: !isFormValid }"
						:style="{ opacity: isFormValid ? 1 : 0.6 }" @click="handleRegister" :disabled="!isFormValid">
						{{ loading ? '注册中...' : '注 册' }}
					</button>
				</div>

				<!-- 其他选项 -->
				<div class="login-options">
					<span class="option" @click="navigateToLogin">已有账号？登录</span>
				</div>

				<!-- 社交登录 -->
				<div class="social-login">
					<span class="social-title">其他方式注册</span>
					<div class="social-icons">
						<div class="social-icon" @click="registerWithWeixin">
							<i class="fa fa-weixin"></i>
						</div>
						<div class="social-icon" @click="registerWithQQ">
							<i class="fa fa-qq"></i>
						</div>
						<div class="social-icon" @click="registerWithWeibo">
							<i class="fa fa-weibo"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		addUser
	} from '@/apis/user'
	export default {
		data() {
			return {
				darkMode: false,
				showPassword: false,
				loading: false,
				formSubmitted: false,
				user: {
					username: '',
					email: '',
					password: '',
					confirmPassword: '',
					agreeTerms: false
				}
			};
		},
		computed: {
			isFormValid() {
				// 验证所有字段
				return this.isUsernameValid &&
					this.isEmailValid &&
					this.user.password.length >= 6 &&
					this.user.password === this.user.confirmPassword &&
					this.user.agreeTerms;
			},
			isUsernameValid() {
				return this.user.username.length >= 3 && this.user.username.length <= 20;
			},
			isEmailValid() {
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				return emailRegex.test(this.user.email);
			},
			passwordStrength() {
				// 简单的密码强度检测
				if (this.user.password.length < 6) return '弱';
				if (/[A-Z]/.test(this.user.password) && /[0-9]/.test(this.user.password) && /[^A-Za-z0-9]/.test(this.user
						.password)) return '强';
				if (/[A-Z]/.test(this.user.password) || /[0-9]/.test(this.user.password) || /[^A-Za-z0-9]/.test(this.user
						.password)) return '中';
				return '弱';
			}
		},
		methods: {
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
			},
			handleRegister() {
				this.formSubmitted = true;
				if (!this.isFormValid) return;

				this.loading = true; // 显示加载状态
				let params = {}
				params.username = this.user.username
				params.email = this.user.email
				params.password = this.user.password
				params.age = 0
				params.gender = '男'
				params.userType = 0
				params.phone = ''
				params.avatar = ''
				// 调用注册API
				addUser(params)
					.then(res => {
						console.log("注册成功:", res);
						if (res.code === 0) { // 根据后端返回的成功状态码判断
							// 注册成功，跳转到登录页面
							this.$router.push("/login");
						} else {
							// 注册失败
							console.log('注册失败')
						}
					})
					.catch(error => {

					})
					.finally(() => {
						this.loading = false; // 隐藏加载状态
					});
			},
			navigateToLogin() {
				// 跳转到登录页面
				this.$router.push('/login');
			},
			showTerms() {
				// 显示用户协议
				this.$modal.show('terms-modal');
			},
			showPrivacy() {
				// 显示隐私政策
				this.$modal.show('privacy-modal');
			},
			registerWithWeixin() {
				// 微信注册逻辑
			},
			registerWithQQ() {
				// QQ注册逻辑
			},
			registerWithWeibo() {
				// 微博注册逻辑
			}
		}
	};
</script>

<style scoped>
	/* 保持与原代码一致的基础样式 */
	.login-container {
		position: relative;
		padding: 0;
		margin: 0;
		height: 100%;
		overflow: hidden;
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.login-card {
		background: white;
		border-radius: 15px;
		padding: 30px;
		width: 100%;
		max-width: 400px;
	}

	.login-title {
		text-align: center;
		margin-bottom: 30px;
		font-size: 24px;
		font-weight: bold;
	}

	.reg-form-item {
		margin-bottom: 20px;
	}

	.input-wrapper {
		display: flex;
		align-items: center;
		position: relative;
	}

	.input-wrapper i {
		margin-right: 10px;
		color: #888;
	}

	.input-wrapper input {
		flex: 1;
		padding: 12px 0;
		border: none;
		outline: none;
		background: transparent;
	}

	.line {
		height: 1px;
		background: #eee;
		margin-top: 5px;
	}

	.get-code-btn {
		position: absolute;
		right: 0;
		background: none;
		border: none;
		color: #4b6cb7;
		font-size: 14px;
		cursor: pointer;
		outline: none;
	}

	.get-code-btn.disabled {
		color: #aaa;
		cursor: not-allowed;
	}

	.toggle-password {
		position: absolute;
		right: 10px;
		cursor: pointer;
		color: #888;
	}

	.reg-btn {
		width: 100%;
		padding: 12px;
		background: #880000;
		color: white;
		border: none;
		border-radius: 25px;
		font-size: 16px;
		cursor: pointer;
		transition: opacity 0.3s;
	}

	.reg-btn.disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.login-options {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20px 0;
	}

	.option {
		color: #888;
		cursor: pointer;
		font-size: 14px;
	}

	.divider {
		width: 1px;
		height: 14px;
		background: #ddd;
		margin: 0 15px;
	}

	.social-login {
		text-align: center;
		margin-top: 30px;
	}

	.social-title {
		color: #888;
		font-size: 14px;
		margin-bottom: 15px;
		display: block;
	}

	.social-icons {
		display: flex;
		justify-content: center;
		gap: 20px;
	}

	.social-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.social-icon:hover {
		background: #e8e8e8;
	}

	.social-icon i {
		font-size: 20px;
		color: #555;
	}

	.agree-item {
		font-size: 12px;
		color: #666;
	}

	.agree-label {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.agree-label input {
		margin-right: 5px;
	}

	.agree-label a {
		color: #4b6cb7;
		text-decoration: none;
	}

	.agree-label a:hover {
		text-decoration: underline;
	}

	/* 新增样式 */
	.error-message {
		color: #ff4d4f;
		font-size: 12px;
		margin-top: 5px;
	}

	.password-strength {
		font-size: 12px;
		margin-top: 5px;
	}

	.strength-弱 {
		color: #ff4d4f;
	}

	.strength-中 {
		color: #faad14;
	}

	.strength-强 {
		color: #52c41a;
	}
</style>